<template>
  <el-table :data="tableData" style="width: 80%">
    <el-table-column label="发布日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="歌曲名字" width="180">
      <template #default="scope">
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
    <el-table-column label="封面" width="150px">
      <template #default="scope">
        <el-image :src="scope.row.url" style="width:100px ;"></el-image>
      </template>

    </el-table-column>
    <el-table-column label="审核状态" width="180">
      <template #default="scope">
        <el-result icon="success" title="审核通过" v-if="scope.row.status==1">
        </el-result>
        <el-result
        icon="error"
        title="审核未通过"
        v-if="scope.row.status==2"
      >
      </el-result>
      <el-result
        icon="warning"
        title="审核中"
        v-if="scope.row.status==0"
      >
      </el-result>
        <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import {getMyMusic} from '@/api/music/music.ts'
import { onMounted,ref } from 'vue';

interface Music {
  date: string
  musicName: string
  picUrl: string
  status: number
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: Music[] =ref([
  {
    date: '2016-05-03',
    musicName: 'Tom',
    picUrl: 'http://p2.music.126.net/Bb50pyrAJzR3ZsjxILnO6A==/109951169278248355.jpg',
    status: 0
  },
  {
    date: '2016-05-02',
    musicName: 'Tom',
    picUrl: 'No. 189, Grove St, Los Angeles',
    status: 0
  },
  {
    date: '2016-05-04',
    musicName: 'Tom',
    picUrl: 'No. 189, Grove St, Los Angeles',
    status: 1
  },
  {
    date: '2016-05-01',
    musicName: 'Tom',
    picUrl: 'No. 189, Grove St, Los Angeles',
    status: 2
  },
]
)
onMounted(async()=>{
  const res = await getMyMusic()
  tableData.value =res.music
  console.log(tableData.value)
})


</script>
<style lang="scss" scoped>
.result {
  padding: 0px;
  height: 130px;
  width: 100px;
}
</style>